
<script lang="ts" setup>
    import MobileNav from '@/components/mobile-ai/components/mobile-nav.vue';
    import { useRouter } from 'vue-router'
    import { Mobile_TOKEN_KEY} from "@/enums/CacheEnum";
    import AiservAPI from "@/api/aiserv";
    const router = useRouter()
    
    const from = ref({
        stream:false,//是否开启流式输出
        emotion:false,//是否有表情
        welcome:false,//欢迎语
        session_type: "user"
    })
    const isTouching = ref(false);//人工智能客服触摸状态
    const isTouched  = ref(false);//人工智能报表触摸状态
    const isTouchver = ref(false);//人工智能训练触摸状态
    const Token = <string>localStorage.getItem(Mobile_TOKEN_KEY);
    const homeList = ref([
        {imgs:new URL('../../assets/images/recognize_white_64.png', import.meta.url).href,bgcolor:'#F9B072',name:'意图识别',router:'mobIntentDiscern'},
        {imgs:new URL('../../assets/images/edit_white_64.png', import.meta.url).href,bgcolor:'#93D2F3',name:'内容总结',router:'mobconter'},
        {imgs:new URL('../../assets/images/plate_white_64.png', import.meta.url).href,bgcolor:'#7296F9',name:'内容归类',router:'mobContentClass'},
        {imgs:new URL('../../assets/images/search_white_64.png', import.meta.url).href,bgcolor:'#BB93F3',name:'实体提取',router:'mobEntityDraw'},
    ])
    //页面初始化在首页调用下接口  token过期 则重新进入登陆页
    function initialization(){
        AiservAPI.postsession(Token,from.value).then(res=>{  
        })
    }
    // 移动端 触摸到元素 事件
    function handleTouchStart(data:any){
        if (data=='intellect') {
            isTouching.value = true;
        }else if(data=='report'){
            isTouched.value = true;
        }else if(data=='seriver'){
            isTouchver.value = true;
        }else if(data=='mobIntentDiscern'){
            homeList.value[0].bgcolor='#f79b4b'
        }else if(data=='mobconter'){
            homeList.value[1].bgcolor='#5cc0f6'
        }else if(data=='mobContentClass'){
            homeList.value[2].bgcolor='#4d7af5'
        }else if(data=='mobEntityDraw'){
            homeList.value[3].bgcolor='#a267f4'
        }
    }
    //移动端 触摸离开元素 事件
    function handleTouchEnd(data:any){
        if (data=='intellect') {
            isTouching.value = false;
        }else if(data=='report'){
            isTouched.value = false;
        }else if(data=='seriver'){
            isTouchver.value = false;
        }else if(data=='mobIntentDiscern'){
            homeList.value[0].bgcolor='#F9B072'
        }else if(data=='mobconter'){
            homeList.value[1].bgcolor='#93D2F3'
        }else if(data=='mobContentClass'){
            homeList.value[2].bgcolor='#7296F9'
        }else if(data=='mobEntityDraw'){
            homeList.value[3].bgcolor='#BB93F3'
        }
    }
    onMounted(() => {
        initialization()
        sessionStorage.removeItem('SummaryTextvalue')
    });
</script>

<template>
    <section class="flex flex-col center">
        <MobileNav :navname="'首页'"  />
        <div class="home-picture  mb-3 relative">
            <pre class="name-box">CPAI 人工智能</pre>
            <img src="../../assets/images/block_400.png" class="home-block" alt="">
            <img src="../../assets/images/city.png" class="w-full home-bg" alt="">
        </div>
        <div class="px-3.5  mb-3 list-box">
            <div class="w-full ai-box rounded-md p-1 flex items-center justify-around px-7  mb-3" 
             @click="router.push('/aicustomer')"   
             @touchstart="handleTouchStart('intellect')"  
             @touchend="handleTouchEnd('intellect')"
             :style="{ backgroundColor: isTouching ? '#9ed1f8' : '#DFF1FF' }" 
             >
                <img src="../../assets/images/seat_300.png" alt="">
                <span class="font-semibold home-text">
                    AI人工智能客服
                </span>
            </div>
            <div class="w-full report-form rounded-md p-1 flex items-center justify-around px-7  mb-3" 
             @click="router.push('/reqort')"
             @touchstart="handleTouchStart('report')" 
             @touchend="handleTouchEnd('report')" 
             :style="{ backgroundColor: isTouched  ? '#f7d6c5' : '#FFECE1' }"
             >
                <img src="../../assets/images/report_300.png" alt="">
                <span class="font-semibold home-text">
                    AI人工智能报表
                </span>
            </div>
            <div class="w-full customer-seriver rounded-md p-1 flex items-center justify-around px-7" 
             @click="router.push('/training')"
             @touchstart="handleTouchStart('seriver')"  
             @touchend="handleTouchEnd('seriver')" 
             :style="{ backgroundColor: isTouchver  ? '#dbc7f3' : '#e9dff5' }"
             >
                <img src="../../assets/images/study_300.png" alt="">
                <span class="font-semibold home-text">
                    AI人工客服训练
                </span>
            </div>
        </div>
        <div  class="px-4.5 flex home-list flex-wrap items-center content-start justify-center">
            <div v-for="(item,index) in homeList" :key="index" class="flex  flex-col items-center " 
             @click="router.push({name:`${item.router}`})"
             @touchstart="handleTouchStart(item.router)"  
             @touchend="handleTouchEnd(item.router)"
             >
                <div class="list-picture" :style="{'background':item.bgcolor}">
                    <img :src="item.imgs" alt="">
                </div>
                <span class="home-text">{{ item.name }}</span>
            </div>
        </div>
    </section>
</template>
  
<style scoped lang="scss">
    .center{
        background: #FFF;
        height: 100vh;
        width: 100%;
        height: 100%;
        flex: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: scroll;
        scrollbar-width: none;
        overflow-y: scroll !important;
        flex: 1;
    }
    .home-picture{
        height: 25%;
        background: linear-gradient(180deg,#3694DC 0%,rgba(21,154,229,0.7) 100%);
        .home-bg{
            height: 100%;
        }
    }
    .list-box{
        height: 35%;
        >div{
            height: 31%;
        }
    }
    .ai-box{
        border: 1px solid #409EFF;
        background-color: #DFF1FF;
        color: #2082D2;
        img{
            height: 100%;
        }
    }
    .report-form{
        border: 1px solid #E6A23C;
        background-color: #FFECE1;
        color: #E91112;
        img{
            height: 100%;
        }
    }
    .customer-seriver{
        border: 1px solid #BB93F3;//BB93F3
        background-color: #e9dff5;
        color: #8e6cbe;
        img{
            height: 100%;
        }
    }
    .home-list{
        // flex: 1;
        height: 100%;
        >div{
            width: 45%;
            height: 50%;
            display: flex;
            justify-content: space-evenly;
            color: #1A2029;
        }
    }
    .home-text{
        font-size: 4vw; /* 文字大小根据视口宽度自适应 */
        max-font-size: 24px; /* 设置最大字体，防止过大 */
        min-font-size: 10px; /* 设置最小字体，防止过小 */
    }
    .name-box{
        font-size: 24px;
        color: #fff;
        position: absolute;
        left: 8%;
        bottom: 38%;
        font-weight: bold;
        font-style: italic;
        font-family: emoji;
    }
    .home-block{
        position: absolute;
        right: 14%;
        bottom: 28%;
        height: 50%;
    }
    .list-picture{
        border-radius: 50%;
        width: 60%;
        padding: 1.3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        >img{
            width: 100%;
        }
    }
</style>